<template>
  <q-list dense class="text-overline text-grey-8">
    <template v-for="(item,index) in newTrees">
      <template v-if="item.children&&item.children.length>0">
        <q-expansion-item
          dense
          expand-separator
          :icon="item.icon||''"
          :label="item.label"
          :key="index"
        >
          <drawer-list :trees="item.children"/>
        </q-expansion-item>
      </template>
      <template v-else>
        <q-item dense clickable v-ripple @click="selectTab(item)" class="rounded-borders"
                :class="{'bg-blue-1 text-primary':currentTab === item.path}">
          <q-item-section avatar>
            <q-icon :name="item.icon||''" :color="currentTab === item.path?'primary':''"/>
          </q-item-section>
          <q-item-section>{{item.label}}</q-item-section>
        </q-item>
      </template>
    </template>
  </q-list>
</template>

<script>
  import DrawerList from '../../components/drawer/Index'

  export default {
    name: 'drawerList',
    props: {
      trees: {
        type: Array,
        default: []
      }
    },
    components: {
      DrawerList
    },
    data () {
      return {
        newTrees:[]
      }
    },
    methods: {
      selectTab (item) {
        if (item.path !== this.currentTab) {
          this.$store.commit('nav/updateCurrentTabs', item)
          this.$store.commit('nav/updateCurrentTab', item.path)
        }
      },
    },
    computed: {
      includeList () {
        let list = this.$store.state.currentTabs.map(item => {
          return item.name
        })
        return list
      },
      currentTab: {
        get () {
          return this.$store.state.nav.currentTab
        },
        set () {
        }
      }
    },
    created () {
      this.newTrees = this.trees.map(item=>{
        if (item.component){
          item.path = item.component.replace(/\//g,'-')
        }
        return item
      })
    }
  }
</script>

<style scoped>

</style>
